<template>
  <div class="card-item">
    <div class="h-48px title">
      <div class="px-10px w-full flex justify-between items-center h-full">
        <div class="font-black"> {{ title }} </div>
        <div class="flex items-center">
          <div
            :class="['button', 'justify-between', 'flex', { 'active-button': buttonSelectId === item.id }]"
            v-for="item in buttonList"
            :key="item.id"
            @click="onUpdateButtonSelectId(item.id)"
          >
            {{ item.name }}
          </div>
        </div>
      </div>
    </div>
    <div class="h-280px px-10px pt-10px">
      <div v-for="item in listData" :key="item.id" class="flex justify-between mb-5px text-sm">
        <div class="content-list">
          {{ item.pctext }}
        </div>
        <div>
          {{ item.time }}
        </div>
      </div>
      <div class="w-full flex justify-end">更多>></div>
    </div>
  </div>
</template>
<script setup>
  defineProps({
    buttonList: {
      type: Array,
      default: () => []
    },
    buttonSelectId: {
      type: Number,
      default: 0
    },
    title: {
      type: String,
      default: ''
    },
    listData: {
      type: Array,
      default: () => []
    }
  });
  const emits = defineEmits(['update:buttonSelectId']);
  const onUpdateButtonSelectId = (id) => {
    emits('update:buttonSelectId', id);
  };
</script>

<style lang="scss" scoped>
  .card-item {
    width: 100%;
    box-shadow: 0 4px 8px 0 rgba(34, 24, 21, 0.35);
    .title {
      background: rgb(0, 42, 95);
      color: #fff;
      .button {
        cursor: pointer;
        margin-left: 10px;
        padding: 0 13px;
        line-height: 35px;
        border: none;
        border-radius: 6px;
        background: rgba(124, 149, 228, 0.2);
        white-space: nowrap;
      }
      .active-button {
        background: #ff8000;
      }
    }
    .content-list {
      width: 80%;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      -o-text-overflow: ellipsis;
    }
  }
</style>
